<!-- 蓝色登录页面2 -->
<template>
	<view class="box">
		<view class="img-a">
			<view class="t-c">
				<button size="default" type="default" style="width: 144rpx;height: 144rpx;    padding: 0;
    border-radius: 50px;margin: 0;border: 1px solid rgba(255, 255, 255, 0.2);" >
					<image :src="avatarUrl" />
				</button>
				<view class="login">
					<view class="tel">{{userInfo.userLogin}}</view>
					<view class="tigs">已登录</view>
				</view>
			</view>
		</view>
		<view class="btnBox btn3" @click="handleJubao">
			<view class="leftBox">
				<image class="icon" src="../../static/home/icon5.png" />
				<view>举报记录</view>
			</view>
			
			<image class="right" src="../../static/home/right2.png" />
		</view>
		<view class="btnBox2" @click="handleLogout">退出登录</view>
	</view>
</template>
<script>
	import {
		mapMutations
	} from "vuex";
	import userImg from '../../static/home/user.png'
	import md5 from '@/common/md5.min.js';
	export default {
		data() {
			return {
				
				avatarUrl: userImg,
				userInfo:{
					userLogin:'',
				}
			};
		},
		onLoad() {

		},
		onShow() {
			let that = this;
			this.userInfo = uni.getStorageSync('userInfo');
			if(uni.getStorageSync('userInfo').headSculpture != ''){
				this.avatarUrl = uni.getStorageSync('userInfo').headSculpture
			}
		},
		methods: {

			handleJubao() {
				
				// 跳转
				uni.navigateTo({
					url: `/pages/home/reportRecord`
				})
				
			},
			handleLogout(){
				uni.$u.http.post(`/manage/api/userInfo/logoutWx`).then(res => {
					if (res.code == 0) {
						uni.clearStorageSync();
						uni.showToast({
							icon: 'none',
							title: '退出成功!'
						})
						setTimeout(() => {
							uni.reLaunch({
								url: '/pages/home/login/index'
							})
						}, 500)
					}
				}).catch(err => {})
			}
		}
	};
</script>
<style lang="scss">
	page {
		background: #F5F6F7;
	}

	.img-a {
		width: 100%;
		height: 416rpx;
		opacity: 1;
		background: url('../../static/home/bg2.png');
		background-size: 100% 100%;

		.t-b {
			font-size: 44rpx;
			font-weight: 400;
			letter-spacing: 0px;
			color: rgba(255, 255, 255, 1);
			padding-top: 60rpx;
			text-align: center;
		}

		.t-c {
			padding-top: 98rpx;
			display: flex;
			justify-content: center;

			image {
				width: 72px;
				height: 72px;
			}

			.login {
				margin-left: 16rpx;
				font-size: 36rpx;
				font-weight: 500;
				color: rgba(0, 0, 0, 1);
				.tel{
					margin-top: 20rpx;
					font-size: 36rpx;
					font-weight: 500;
					color: rgba(255, 255, 255, 1);
				}
				.tigs {
					margin-top: 28rpx;
					font-size: 26rpx;
					font-weight: 400;
					color: rgba(255, 255, 255, 0.6);
				}
			}
		}

		image {
			width: 96rpx;
			height: 96rpx;
		}
	}

	.agreement {
		margin-top: 60rpx;
		padding-left: 50rpx;
		display: flex;
		align-items: center;
		font-size: 28rpx;
		font-weight: 400;
		color: #2b2b2b;

		.agreement-txt {
			display: flex;
			justify-items: center;

			.privacy {
				color: rgba(15, 83, 172, 1);
			}
		}
	}

	.btnBox {
		margin: 0 40rpx;
		margin-top: -80rpx;
		margin-bottom: 80rpx;
		padding: 0 32rpx;
		
		height: 128rpx;
		border-radius: 16rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.leftBox{
			display: flex;
			align-items: center;
		}
		.icon {
			width: 32rpx;
			height: 32rpx;
			margin-right: 20rpx;
		}

		.right {
			width: 32rpx;
			height: 32rpx;
		}
	}
	
	.btnBox2{
		margin: 0 40rpx;
		height: 80rpx;
		border-radius: 40rpx;
		background: #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 30rpx;
		font-weight: 400;
		color: rgba(102, 102, 102, 1);
	}
	.btn1 {
		background: #334882;
		color: #FFFFFF;
	}

	.btn2 {
		background: #F2853D;
		color: #FFFFFF;
	}

	.btn3 {
		background: #FFFFFF;
		color: #333333;
	}

	.webBox {
		width: 300px;
		height: 400px;

		.image1 {
			width: 600rpx;
			height: 2768rpx;
		}

		.image2 {
			width: 600rpx;
			height: 1808rpx;
		}
	}

	.footer {
		padding: 32rpx 56rpx;
		background-color: #fff;
		display: flex;
		justify-content: space-between;
	}
</style>
